<template>
	<div>
		<!-- 顶部选项卡 -->
		<scroll-view class="pagecontrol-top-scroll" scroll-x="true" scroll-with-animation :scroll-into-view="scrollInto">
		    <view class="pagecontrol-top-title">
		        <view v-for="(items, index) in itemsArr" :key="index" class="pagecontrol-top-text" @click="changeTab(index)" :id="'tab' + index">
		            <view :class="tabIndex === index ? 'pagecontrol-top-selected' : 'pagecontrol-top-normal'">{{ items }}</view>
		            <view class="pagecontrol-bottom-line" :class="tabIndex === index ? 'pagecontrol-bottom-line-show' : 'pagecontrol-bottom-line-visibility'"></view>
		        </view>
		    </view>
		</scroll-view>
		<!-- 内容 -->
		<swiper :duration="150" :current="tabIndex" @change="onChangeTab" :style="'height:' + scrollH + 'px;'">
		    <swiper-item v-for="(item, index) in itemsArr" :key="index">
		        <scroll-view scroll-y="true" show :style="'height:' + scrollH + 'px;'" >
					<view v-if="index==0" >
					    <!--基础信息-->
						<view style="margin: 40px;display: flex;align-items: center;justify-content: center;">
							<uni-forms labelWidth="90px">
								<uni-forms-item label="公司名称:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>{{user.dept.deptName}}</text>
									</view>
								</uni-forms-item>
								<uni-forms-item label="公司ID:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>{{user.deptId}}</text>
									</view>
								</uni-forms-item>
								<uni-forms-item label="系统版本:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>移动端完整版</text>
									</view>
								</uni-forms-item>
								<!-- <uni-forms-item label="有效期:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>24个月</text>
										<text style="color: red;margin-left: 10px;">*剩余18个月07天*</text>
									</view>
								</uni-forms-item> -->
								<uni-forms-item label="手机账户:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>{{user.phonenumber}}</text>
									</view>
								</uni-forms-item>
								<uni-forms-item label="角色:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>【{{role.join('、')}}】</text>
									</view>
								</uni-forms-item>
								<!-- <uni-forms-item label="用户积分:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>888</text>
									</view>
								</uni-forms-item> -->
								<uni-forms-item label="姓名:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>{{user.userName}}</text>
									</view>
								</uni-forms-item>
								<uni-forms-item label="联系电话:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>{{user.phonenumber}}</text>
									</view>
								</uni-forms-item>
								<uni-forms-item label="所在地址:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>{{user.dept.deptDistrictName}}{{user.dept.deptAddress}}</text>
									</view>
								</uni-forms-item>
								<uni-forms-item label="创建时间:">
									<view style="display: flex;align-items: center;height: 36px;">
										<text>{{user.createTime}}</text>
									</view>
								</uni-forms-item>
							</uni-forms>
						</view>
					</view>
					<view v-else-if="index==1" style="padding-bottom: 100px;">
					    <!--账户安全-->
						<view style="display: flex;justify-content: space-between;padding: 10px;height: 50px;">
							<view style="display: flex;flex-direction: column;justify-content: space-between;width: 40%;">
								<text>登录密码</text>
								<text>******</text>
							</view>
							<!-- <view style="align-self: end;width: 40%;">
								20220115 18:12:30
							</view> -->
							<view style="align-self: end;width:20%;">
								<view @click="resetPWD" hover-class="buttonHover" style="color: blue;">重设密码</view>
							</view>
						</view>
						<!-- <view style="display: flex;justify-content: space-between;padding: 10px;height: 50px;">
							<view style="display: flex;flex-direction: column;justify-content: space-between;width: 40%;">
								<text>账号绑定邮箱</text>
								<text>{{user.email}}</text>
							</view>
							<view style="align-self: end;width: 40%;">
								20220115 18:12:30
							</view>
							<view style="align-self: end;width: 20%;">
								<uni-link href="https://uniapp.dcloud.io/" text="https://uniapp.dcloud.io/" showUnderLine="false"
									color="blue">更改邮箱</uni-link>
							</view>
						</view> -->
					</view>
		        </scroll-view>
		    </swiper-item>
		</swiper>
		<uni-popup ref="resetPWDDialog" type="dialog">
			<uni-popup-dialog type="info" cancelText="取消" confirmText="重置" title="重置密码"
				@confirm="resetPWDDialogConfirm" :before-close="true" @close="closeDialog('resetPWDDialog')">
					<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="75px">
						<uni-forms-item label="新密码" required name="passwd">
							<uni-easyinput type="password" v-model="formData.passwd" placeholder="请输入新密码" />
						</uni-forms-item>
						<uni-forms-item label="再次输入" required name="confirePwd">
							<uni-easyinput type="password" v-model="formData.confirePwd" placeholder="请再次输入密码" />
						</uni-forms-item>
					</uni-forms>
			</uni-popup-dialog>
		</uni-popup>
	</div>
</template>

<script>
	import {resetPwd} from '@/api/login.js'
	export default {
		data() {
			return {
				itemsArr: ['基础信息','账户安全'],
				tabIndex: 0,
				scrollH: 700,
				scrollInto: '',
				user:uni.getStorageSync('storage_data').vuex_userInfo||[],
				role:[],
				formData:{
					dept:'',
					passwd:'',
					confirePwd:'' //二次密码
				},
				// 校验规则->签收
				rules: {
					passwd: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					},
					confirePwd: {
						rules: [{
							required: true,
							errorMessage: '密码不能为空',
						}]
					},
				},
			}
		},
		onLoad(e) {
		    uni.getSystemInfo({
		        success: res => {
		            this.scrollH = res.windowHeight-40;
		        }
		    });
		},
		created() {
			this.user.roles.forEach(item=>{
				this.role.push(item.roleName)
			})
		},
		methods: {
			//手动关闭dialog
			closeDialog(type){
				this.$refs[type].close()
			},
			//重置密码
			resetPWD(){
				this.$refs.resetPWDDialog.open()
			},
			//确认重置密码
			resetPWDDialogConfirm(){
				this.$refs.form.validate().then(res => {
					if(this.formData.passwd!==this.formData.confirePwd)
					{
						uni.showToast({
							icon: 'none',
							title: '密码输入不一致'
						})
						return
					}
					uni.showLoading({
						title: '正在修改...',
					})
					this.formData.dept=this.user.deptId
					resetPwd(this.user.phonenumber,this.formData).then(res => {
						uni.hideLoading()
						if (res.code == '200') {
							uni.showToast({
								title: '修改成功',
								icon: 'none'
							})
							this.$refs.resetPWDDialog.close()
						} else {
							uni.showToast({
								icon: 'none',
								title: res.msg
							})
						}	
					})
				}).catch(err => {
					uni.showToast({
						title: err[0].errorMessage,
						icon: 'none'
					})
				})
			},
			// 切换选项
			changeTab(index) {
			    if (this.tabIndex === index) {
			        return;
			    }
			    this.tabIndex = index;
			    // 滚动到指定元素
			    this.scrollInto = 'tab' + index;
			},
			// 监听滑动
			onChangeTab(e) {
				uni.showLoading({
					title:'正在加载',
				})
				setTimeout(function() {
					uni.hideLoading()
				}, 500);
			    this.changeTab(e.detail.current);
			},
		},
	}
</script>

<style scoped>
.pagecontrol-top-scroll {
    height: 40px;
    width: 100%;
    white-space: nowrap;
    box-sizing: border-box;
    border-bottom: 1rpx solid #ededed;
	background-color: #f8f8f8;
}

.pagecontrol-top-title {
    height: 100%;
    width: 100%;
    display: flex;
    justify-content: space-around;
}

.pagecontrol-top-text {
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
}

.pagecontrol-top-normal {
    color: #656565;
    font-size: 16px;
}

.pagecontrol-top-selected {
    color: #000000;
    font-weight: bold;
    font-size: 16px;
}

.pagecontrol-bottom-line {
    width: 50vw;
    height: 3px;
    margin-top: 8px;
    background-color: #bf5f09;
	border-radius: 11px;
}

.pagecontrol-bottom-line-show {
    visibility: visible;
}

.pagecontrol-bottom-line-visibility {
    visibility: hidden;
}
.buttonHover{
	opacity: 0.6;
}
::v-deep .uni-border-left{
	    border-left-color: #f0f0f0;
	    border-left-style: solid;
	    border-left-width: 1px;
	    background-color: rgb(157,81,38);
	    border-radius: 0 0 11px 0;
	    /* color: white; */
	}
	::v-deep .uni-button-color{
	    color: #ffffff;
	}

</style>